<template>
<div>
<table border="1" cellspacing="0" width="80%">
  <thead>
  <tr><th>商品名</th><th>产地</th><th>单价</th><th>数量</th><th>单项总价</th><th>类别</th><th>操作</th></tr>
  </thead>
  <tbody>
  <tr v-for="product in productList">
    <td>{{product.name}}</td>
    <td>{{product.factory}}</td>
    <td>{{product.price}}</td>
    <td><input type="text" v-model="product.num"></td>
    <td>{{product.price*product.num}}</td>
    <td>{{product.type}}</td>
    <td><input type="button" value="删除" @click="del(product.id)">
      <input type="button" value="修改" @click="findById(product.id);updateVisible='true'"></td>
  </tr>



  </tbody>

  <input type="button" v-for="page in pages"  :key="page"
  :value="page" @click="findByItem(page)"/>


<div>
  购物车总价：{{totalPrice}}
</div>
</table>
  <input type="button" value="添加" @click="addVisible = 'true'">

  <div class="dialogDiv" v-if="addVisible">
    <div class="content">
    编号：<input type="text" v-model="addObj.id"><br>
      商品名：<input type="text" v-model="addObj.name"><br>
      产地：<input type="text" v-model="addObj.factory"><br>
      单价：<input type="text" v-model="addObj.price"><br>
      类别：<select v-model="addObj.type">
      <option value="电器">电器</option>
      <option value="食物">食物</option>
    </select>
      <input type="button" value="添加" @click="addProduct()">
    </div>
</div>

  <div class="dialogDiv" v-if="updateVisible">
    <div class="content">
      编号：{{updateObj.id}}<br>
      商品名：{{updateObj.name}}<br>
      产地：{{updateObj.factory}}<br>
      单价：<input type="text" v-model="updateObj.price"><br>
      类别：{{updateObj.type}}<br>
      <input type="button" value="修改" @click="update()">
    </div>
  </div>



</div>
</template>

<script>
export default {
    data(){
        return{
        pages:5,
          addVisible:false,
          addObj:{},
          updateObj:{},
          updateVisible:false,
        productList:[
          {id:1,name:"电饭煲",factory:"深圳",price:500,type:"电器",num:1},
          {id:2,name:"饼干",factory:"青岛",price:12,type:"食品",num:1},
          {id:3,name:"电水壶",factory:"北京",price:400,type:"电器",num:1},
          {id:4,name:"电冰箱",factory:"青岛",price:1400,type:"电器",num:1},
          {id:5,name:"汉堡",factory:"成都",price:4,type:"食品",num:1},
          {id:6,name:"薯条",factory:"上海",price:6,type:"食品",num:1},
        ]
      }
    },
methods:{
  addProduct(){
    //在集合中添加对象
    this.productList.push(this.addObj);
    this.addVisible = false;
  },
  del(id){
    //找到指定编号对应的下标
    var index = this.productList.findIndex(n => n.id === id);
    this.productList.splice(index,1);
  },
  findById(id){
    this.updateObj = this.productList.find(n => n.id === id);

  },
  update(){
    this.updateVisible = false;
    this.updateObj ={};
  },
  findByItem(page){
    alert(page);
  }
},
name: "product",
  computed:{
      totalPrice(){
        var total=0;
        this.productList.forEach(n =>{
          total+=n.price * n.num;
        });
        return total;
      }
  }
}
</script>

<style scoped>
.dialogDiv{
  width: 100%;
  height: 100%;
  background: rgba(255,0,0,0.5);
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  justify-content: center;
}

.content{
  width: 600px;
  height: 400px;
  background: white;
  border: 2px solid #000;
}
</style>